<template>
  <div class="hold-transition">
    <div class="content-header">
      <h1>
        统计分析
        <small>会员统计</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计分析</el-breadcrumb-item>
        <el-breadcrumb-item>会员统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div class="box">
        <span class="demonstration">查询年月范围:</span>
        <!-- <div class="demonstration">值：{{ dateData.startDateStr }}</div> -->
        <el-date-picker
          v-model="dateData.startDateStr"
          type="month"
          align="left"
          format="yyyy 年 MM 月"
          value-format="yyyy-MM"
          placeholder="开始年月"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <span class="demonstration"> - </span>
        <el-date-picker
          v-model="dateData.endDateStr"
          type="month"
          align="right"
          format="yyyy 年 MM 月"
          value-format="yyyy-MM"
          placeholder="结束年月"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <span style="margin-left: 10px">
          <el-button class="dalfBut" @click="totalMemberCounts()"
            >确定</el-button
          >
        </span>
        <div id="chart1" style="height: 600px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateData: {
        startDateStr: "",
        endDateStr: "",
      },
      pickerOptions: {
        disabledDate: (time) => {
          return this.dealDisabledDate(time);
        },
      },
    };
  },
  methods: {
    dealDisabledDate(time) {
      let times = Date.now();
      return time.getTime() > times;
    },
    totalMemberCounts() {
      if (this.dateData.startDateStr > this.dateData.endDateStr) {
        this.$message("开始结束年月顺序错误，请重新查询！");
      } else {
        this.$http
          .post("api/report/totalMemberCount", this.dateData)
          .then((res) => {
              let myChart1 = this.$echarts.init(
                document.getElementById("chart1")
              );
              myChart1.setOption({
                title: {
                  text: "",
                  subtext: "",
                  x: "center",
                },
                tooltip: {
                  trigger: "axis",
                  formatter: res.data.data.totalCounts,
                },
                xAxis: {
                  name: "年/月",
                  type: "category",
                  boundaryGap: false,
                  data: res.data.data.yearAndMonth,
                },
                yAxis: {
                  name: "会员数/人",
                  type: "value",
                },
                series: [
                  {
                    data: res.data.data.totalCounts,
                    type: "line",
                  },
                ],
              });
          });
      }
    },
  },
};
</script>